<!--
 * @Author: egg1bro
 * @Date: 2022-12-26 10:52:19
 * @LastEditTime: 2023-01-14 12:02:58
 * @LastEditors: egg1bro
 * @Description: 
 * @FilePath: \team-graduation-design\src\views\LoginSms\index.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="nav">
        <van-nav-bar title="手机验证码登录" right-text="客服" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
    </div>

    <div class="form">
        <van-form @submit="onSubmit">
            <!-- 账号密码框 -->
            <van-cell-group inset>
                <van-field v-model="username" clearable type="" name="手机号" placeholder="手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]" />
                <van-field v-model="sms" center clearable placeholder="请输入短信验证码">
                    <template #button>
                        <van-button size="small" type="primary" @click="startTimer"
                            v-if="timeLeft == 0">获取验证码</van-button>
                        <span v-else="timeLeft > 0">{{ timeLeft + "s后重新获取" }}</span>
                    </template>
                </van-field>

            </van-cell-group>

            <!-- 登录按钮 -->
            <div class="lgbtn">
                <van-button square block type="primary" @click="submitPhone" native-type="submit"
                    :disabled="checked == true ? false : true">
                    登录
                </van-button>
            </div>
            <!-- 勾选框 -->
            <van-field name="checkbox">
                <template #input>
                    <van-checkbox v-model="checked" shape="square" icon-size="15px">
                    </van-checkbox>
                    <div class="d1">我已经阅读并同意学习通 <a @click="showDialog">《登录政策》</a> 和 <a @click="showDialog">《用户协议》</a>
                    </div>
                </template>
            </van-field>
        </van-form>
    </div>


    <!-- dialog -->
    <van-dialog v-model:show="show" message-align="left" title="使用协议与隐私政策" show-cancel-button @confirm="onConfirm"
        :message="message">

    </van-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useLoginStore } from '@/stores/login'
import { showToast } from 'vant';
//实例化路由
const router = useRouter()
// 实例化仓库
const loginStore = useLoginStore()
const { getSms, getUserLoginBySms } = loginStore
const username = ref('');
const checked = ref(false);
const sms = ref('')
// 设置默认验证码倒计时
const timeLeft = ref(0)
let timer = null
// 使用 ref 创建可响应的变量
const show = ref(false);
// dialog 里 message的值
const message = `欢迎使用“学习通”提供的产品和服务！       
                 为了更透明的呈现数字学院收集和使用您的个人信息的情况，数字学院根据业务实际情况更新了协议;特向您推送本提示。`
// 定义方法
const showDialog = () => {
    show.value = true;
};
const onConfirm = () => {
    show.value = false;
};

const onClickLeft = () => router.push('/login');

const onClickRight = () => showToast('按钮');
const onSubmit = (values) => {
    console.log('submit', values);
};

// 倒计时开始 并获取验证码
const startTimer = async () => {

    if (timeLeft.value === 0) {
        timeLeft.value = 60
    }
    timer = setInterval(() => {
        if (timeLeft.value > 0) {
            timeLeft.value--;
        } else {
            clearInterval(timer);
        }
    }, 1000);
    try {
        await getSms(username.value)
    } catch (error) {
        return Promise.reject(error)
    }
}

// 提交手机号和验证码
const submitPhone = async () => {
    try {
        await getUserLoginBySms({ sms: sms.value, phone: username.value })
    } catch (error) {
        return Promise.reject(error)
    }
}
</script>

<style lang="less"  scoped>
a {
    text-decoration: none;

}

.nav {
    margin-bottom: 25px;

    .van-hairline--bottom:after {
        border-bottom-width: 0;
    }

    --van-nav-bar-arrow-size: 20px;
    --van-nav-bar-icon-color: black;
    --van-nav-bar-text-color: #a9a9a9;
    --van-nav-bar-title-text-color:black;
}

.form {
    .d1 {
        font-size: 10px;
        color: #a9a9a9;

        a {
            color: #1989fa;
            text-decoration: none;
        }
    }

    .van-checkbox {
        margin-left: 15px;
        margin-right: 5px;
    }

    .lgbtn {
        margin: 30px 30px 10px 30px;
    }
}
</style>